<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>页面布局</title>
		<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
		<script type="text/javascript" src="../js/easyui/jquery.easyui.min.js"></script>
		<script type="text/javascript" src="../js/easyui/locale/easyui-lang-zh_CN.js"></script>
		<script type="text/javascript" src="../js/ztree/jquery.ztree.all-3.5.js" ></script>
		<link rel="stylesheet" href="../js/easyui/themes/icon.css" />
		<link rel="stylesheet" href="../js/easyui/themes/default/easyui.css" />
		<link rel="stylesheet" href="../js/ztree/zTreeStyle.css"/>

		<script type="text/javascript">
			$(function() {
				//2开启简单树形格式
				var setting = {
					data: {
						simpleData: {
							enable: true
						}
					},
					//添加选项卡
					callback:{
						onClick:function(event,treeId,treeNode,clickFlag){
							
							var content = '<div style="width:100%;height:100%;overflow:hidden;">'
								+ '<iframe src="'
								+ treeNode.page
								+ '" scrolling="auto" style="width:100%;height:100%;border:0;" ></iframe></div>';
								
							if(treeNode.page!=undefined && treeNode.page!= "") {
								if ($("#mytabs").tabs('exists', treeNode.name)) {// 判断tab是否存在
									$("#mytabs").tabs('select', treeNode.name); // 切换tab
								} else {
									$("#mytabs").tabs('add',{
									title:treeNode.name,
									content:content,
									closable: true,
									})
								}
							}
							
						}
					}
				};
				
				//3.提供ztree树形菜单数据
				var zNodes = [
				{id:1 ,pId:0 ,name:"主机游戏"},
				{id:2 ,pId:0 ,name:"单机游戏"},
				{id:11,pId:1 ,name:"王者荣耀",page:"http://www.baidu.com"},
				{id:12,pId:1 ,name:"英雄联盟",page:"http://www.itcast.cn"},
				{id:13,pId:2 ,name:"使命召唤"},
				{id:14,pId:2 ,name:"罪恶都市"},
				]; 
				//4.生成树形菜单
				$.fn.zTree.init($("#baseMenu"),setting,zNodes);
				
				
				//选项卡注册事件
				$("#mytabs").tabs({
					onContextMenu:function(e, title,index){
						//关闭默认的右键事件
						e.preventDefault();
						//显示自定义右键菜单
						$('#mm').menu('show', { 
						left: e.pageX ,
						top: e.pageY
						});
						
					}
				})
			})
		</script>

	</head>

	<body class="easyui-layout">
		<div data-options="region:'north',title:'传智播客'" style="height:50px;"></div>

		<div data-options="region:'south',title:'South Title'" style="height:50px;">南部</div>

		<div data-options="region:'east',title:'East'" style="width:100px;">东部</div>

		<div data-options="region:'west',title:'导航菜单'" style="width:100px;">
			<!--折叠面板 -->
			<div class="easyui-accordion" data-options="fit:true">
				<div data-options="title:'游戏菜单'">
					<!-- 1.插入树形插件  制作树形菜单-->
					<ul id="baseMenu" class="ztree"></ul>
				</div>
			</div>
		</div>
		
		<div data-options="region:'center',title:'主界面'" style="padding:5px;background:#eee;">
			<div class="easyui-tabs" data-options="fit:true" id="mytabs">

			</div>
		</div>
		
		<div id="mm" class="easyui-menu" style="width:120px;"> 
			<div data-options="name:'Close'">关闭当前窗口</div> 
			<div data-options="name:'CloseOthers'">关闭其他窗口</div>
			<div class="menu-sep"></div> 
			<div data-options="iconCls:'icon-cancel',name:'CloseAll'">关闭所有窗口</div>
		</div> 



	</body>

</html>